<template>
    <div>
        <left-menu></left-menu>
        <div class="main">
            <main-head></main-head>
            <div class="col-md-8 layout">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        角色列表
                        <div class="text-right">
                            <button class="btn btn-sm btn-primary" @click="clearData(0)">新增</button>
                        </div>
                    </div>
                    <div class="panel-body">
                        <table class="table table-striped">
                            <thead>
                            <tr>
                                <th>#</th>
                                <th>名称</th>
                                <th>创建时间</th>
                                <th>修改时间</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="(val,key) in items" @click="getOne(val.id)" style="cursor: pointer">
                                    <td scope="row">{{val.id}}</td>
                                    <td>{{val.name}}</td>
                                    <td>{{val.created_at}}</td>
                                    <td>{{val.updated_at}}</td>
                            </tr>
                            </tbody>
                        </table>
                        <div class="block">
                            <el-pagination
                                    @current-change="clickCallback"
                                    :current-page.sync="currentPage"
                                    layout="total, prev, pager, next"
                                    :total="total">
                            </el-pagination>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4 layout">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        编辑角色
                    </div>
                    <div class="panel-body">
                       <div class="form-group">
                           <label class="col-md-3">角色名称</label>
                           <div class="col-md-8">
                               <input class="form-control" v-model="formData.name" />
                           </div>
                       </div>
                    </div>
                    <div class="panel-footer text-right">
                        <button class="btn btn-sm btn-primary" @click="setPermission(formData.id)" :disabled="!formData.id">配置权限</button>
                        <button class="btn btn-sm btn-primary" @click="editData()">保存</button>
                        <button class="btn btn-sm btn-info" @click="clearData(1)">取消</button>
                        <button class="btn btn-sm btn-info" @click="delOne(formData.id)">删除</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 权限配置 -->
        <modal name="set-permission" class="v--modal-box v--modal vue-dialog">
            <div class="dialog-content">
                <div class="dialog-c-title">角色权限配置</div>
                <div class="dialog-c-text">
                    <div class="col-md-12">
                        <h5>权限配置</h5>
                        <div>
                            <template v-for="(val,key) in permissions">
                                <input type="checkbox" name="permission" :value="val.id" v-model="permission.permissions"/>{{val.name}}
                            </template>
                        </div>
                        <div class="form-group">
                            <button @click="setRolePermission(formData.id)" type="button" class="btn btn-sm btn-primary">保存</button>
                        </div>
                    </div>
                </div>
            </div>
        </modal>
    </div>
</template>
<script>
    import LeftMenu from '../menu.vue';
    import MainHead from '../head.vue';
    export default {
        data() {
            return {
                currentPage: 1,//当前页码
                total: 0, //总行数
                items: [],
                param: {
                    page: 1,
                },
                formData: {
                    id: 0,
                    name: '',
                },
                permission: {
                    permissions: [],
                },
                permissions: [],
                rolePermission: [],
            }
        },
        methods: {
            clickCallback(pageNum) {
                var _this = this;
                _this.param.page = pageNum;
                _this.getList();
            },
            getList: function (event){
                var _this = this;
                axios.post('/api/admin/roles', _this.param)
                    .then(function (res) {
                        if(res.data.code === 200){
                            _this.items = res.data.data.data;
                            _this.currentPage = res.data.data.current_page;
                            _this.total = res.data.data.total;
                        }else {
                            _this.$message({
                                showClose: true,
                                message: res.data.msg,
                                type: 'error'
                            });
                        }
                    })
                    .catch(function (error) {
                        _this.$message({
                            showClose: true,
                            message: error,
                            type: 'error'
                        });
                    });
            },
            editData: function() {
                var _this = this;
                var api = '/api/admin/role/store';
                if(_this.formData.name == ""){
                    _this.$message({
                        showClose: true,
                        message: "请填写角色名称",
                        type: 'waning'
                    });
                }
                if(_this.formData.id){
                    api = '/api/admin/role/update/'+_this.formData.id;
                }
                axios.post(api, _this.formData)
                    .then(function (res) {
                        if(res.data.code === 200){
                            _this.$message({
                                showClose: true,
                                message: '编辑成功' ,
                                type: 'success'
                            });
                            _this.getList();
                        }else {
                            _this.$message({
                                showClose: true,
                                message: res.data.msg,
                                type: 'error'
                            });
                        }
                    })
                    .catch(function (error) {
                        _this.$message({
                            showClose: true,
                            message: error,
                            type: 'error'
                        });
                    });
            },
            getOne: function(id){
                var _this = this;
                axios.post('/api/admin/role/'+id)
                    .then(function (res) {
                        if(res.data.code === 200){
                            _this.formData.id = res.data.data.id;
                            _this.formData.name = res.data.data.name;
                        }else {
                            _this.$message({
                                showClose: true,
                                message: res.data.msg,
                                type: 'error'
                            });
                        }
                    })
                    .catch(function (error) {
                        _this.$message({
                            showClose: true,
                            message: error,
                            type: 'error'
                        });
                    });
            },
            delOne: function(id){
                var _this = this;
                axios.post('/api/admin/role/delete/'+id)
                    .then(function (res) {
                        if(res.data.code === 200){
                            _this.$message({
                                showClose: true,
                                message: '编辑成功' ,
                                type: 'success'
                            });
                            _this.getList();
                        }else {
                            _this.$message({
                                showClose: true,
                                message: res.data.msg,
                                type: 'error'
                            });
                        }
                    })
                    .catch(function (error) {
                        _this.$message({
                            showClose: true,
                            message: error,
                            type: 'error'
                        });
                    });
            },
            getPermissions: function(id){//获取角色已经配置的权限
                var _this = this;
                axios.post('/api/admin/role/'+id+'/permissions')
                    .then(function (res) {
                        if(res.data.code === 200){
                            _this.permission.permissions = res.data.data;
                        }else {
                            _this.$message({
                                showClose: true,
                                message: res.data.msg,
                                type: 'error'
                            });
                        }
                    })
                    .catch(function (error) {
                        _this.$message({
                            showClose: true,
                            message: error,
                            type: 'error'
                        });
                    });
            },
            clearData: function(type){
                var _this = this;
                if (_this.formData.id && type){
                    _this.getOne(_this.formData.id);
                }else{
                    _this.formData.name = "";
                    _this.formData.id = 0;
                }
            },
            setPermission(id) {
                this.getPermission();
                this.getPermissions(id);
                this.$modal.show('set-permission');
            },
            getPermission(){
                var _this = this;
                axios.post('/api/admin/permission/all')
                    .then(function (res) {
                        if(res.data.code === 200){
                            _this.permissions = res.data.data;
                        }else {
                            _this.$message({
                                showClose: true,
                                message: res.data.msg,
                                type: 'error'
                            });
                        }
                    })
                    .catch(function (error) {
                        _this.$message({
                            showClose: true,
                            message: error,
                            type: 'error'
                        });
                    });
            },
            setRolePermission: function(id){
                var _this = this;
                axios.post('/api/admin/role/'+id+'/set-permission', _this.permission)
                    .then(function (res) {
                        if(res.data.code === 200){
                            _this.$message({
                                showClose: true,
                                message: '编辑权限成功' ,
                                type: 'success'
                            });
                        }else {
                            _this.$message({
                                showClose: true,
                                message: res.data.msg,
                                type: 'error'
                            });
                        }
                    })
                    .catch(function (error) {
                        _this.$message({
                            showClose: true,
                            message: error,
                            type: 'error'
                        });
                    });
            },
        },
        mounted() {
            this.getList();
        },
        components: {
            LeftMenu,
            MainHead,
        }
    }
</script>
